<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直方向对齐【文本与图片对齐】</title>
		<!-- 垂直方向对象属性  vertical-align
		     使用方法：1.用于表格中单元素垂直居中
					  2.用于行内元素以及行内块元素
					  【文本和图片垂直居中（对齐）效果】
					  对齐分四种：基线对齐、顶部对齐
					             居中对齐、底部对齐
					元素种类：块元素、行元素、行内块元素
					块元素特点：独占一行
					行元素特点：一行内显示、不可设置宽高
					网页：元素之间嵌套生成
					行元素与块元素可以任意嵌套
					前提：设置宽高---行套块
								 ---块套块  √
								 ---块套行  √
					前提：一行内显示---行套块 √
								   ---块套块 ×
								   ---块套行 √
								   ---行套行 √
		 -->
	</head>
	<style>
		im g:nth-child(1){
			/* verical-align:baseline 默认基线对齐 */
			vertical-align: baseline;
		}
		im g:nth-child(2){
			/* verical-align:top 顶部对齐 */
			vertical-align: top;
			background-color: red;
		}
		img.baseline{
			vertical-align: baseline;
		}
		img.top{
			vertical-align: top;
		}
		img.middle{
			vertical-align: middle;
		}
		img.bottom{
			vertical-align: bottom;
		}
	</style>
	<body>
		<!-- 需求结构：4个p、嵌套文字： 图片叫什么名字 
							文字后加img，设定宽高：25~100px
							基线对齐、顶部对齐
							居中对齐、底部对齐
		-->
		<P>章若楠<img class="baseline" src="img/1.png" alt="章" width="56px" height="100px">基线对齐</P>
		<p>哪托<img class="top" src="img/2.png" alt="哪托" width="100px" height="100px">顶部对齐</p>
		<p>坤坤<img class="middle" src="img/3.png" alt="坤坤" width="100px" height="100px">居中对齐</p>
		<p>ikun<img class="bottom" src="img/4.png" alt="ikun" width="100px" height="100px">底部对齐</p>
		<!-- css选择器--抓第一张图片......
		 思路：派生选择器：找后代+伪类选择器：添加效果【错误】
		 错误原因：html结构不符合派生特点：p包含4个img
		          伪类选择器，4个img需要在一个p中
		 p img:nth-child(1)
		 -->
	</body>
</html>